<template>
    <div class="foods">
     <div class="m-right-top">
        <van-image
          src="https://mall.s.maizuo.com/f36a311f47786f34f15fb8a2c0cd58c4.jpg?x-oss-process=image/resize,w_563"
        />
      </div>
      <div class="m-right-bottom">
        <ul>
          <router-link to="/index/detail" tag="li">
            <div class="picture">
              <img
                src="https://mall.s.maizuo.com/14a9e655a578abe935f8c150b6d85592.png?x-oss-process=image/resize,w_248"
                alt
              />
            </div>
            <div class="title">
              <span>红心火龙果</span>
            </div>
            <div class="price">
              <span>&yen;199</span>
            </div>
          </router-link>
         <router-link to="/index/detail" tag="li">
            <div class="picture">
              <img
                src="https://mall.s.maizuo.com/0238d75b8a9e13c5a18df9781c296c83.png?x-oss-process=image/resize,w_248"
                alt
              />
            </div>
            <div class="title">
              <span>红心火龙果</span>
            </div>
            <div class="price">
              <span>&yen;199</span>
            </div>
         </router-link>
          <router-link to="/index/detail" tag="li">
            <div class="picture">
              <img
                src="https://mall.s.maizuo.com/0238d75b8a9e13c5a18df9781c296c83.png?x-oss-process=image/resize,w_248"
                alt
              />
            </div>
            <div class="title">
              <span>红心火龙果</span>
            </div>
            <div class="price">
              <span>&yen;199</span>
            </div>
          </router-link>
          <router-link to="/index/detail" tag="li">
            <div class="picture">
              <img
                src="https://mall.s.maizuo.com/9aba9f63c14a9aa7d469b62a0f9cde41.png?x-oss-process=image/resize,w_248"
                alt
              />
            </div>
            <div class="title">
              <span>红心火龙果</span>
            </div>
            <div class="price">
              <span>&yen;199</span>
            </div>
         </router-link>
          <li>
            <div class="picture">
              <img
                src="https://mall.s.maizuo.com/c3797b5e9dab17cb3e1c56547ba7d406.png?x-oss-process=image/resize,w_248"
                alt
              />
            </div>
            <div class="title">
              <span>红心火龙果</span>
            </div>
            <div class="price">
              <span>&yen;199</span>
            </div>
          </li>
          <li>
            <div class="picture">
              <img
                src="https://mall.s.maizuo.com/bcc961c6faea5b9a2467c9d759db3cd6.png?x-oss-process=image/resize,w_248"
                alt
              />
            </div>
            <div class="title">
              <span>红心火龙果</span>
            </div>
            <div class="price">
              <span>&yen;199</span>
            </div>
          </li>
          <li>
            <div class="picture">
              <img
                src="https://mall.s.maizuo.com/bcc961c6faea5b9a2467c9d759db3cd6.png?x-oss-process=image/resize,w_248"
                alt
              />
            </div>
            <div class="title">
              <span>红心火龙果</span>
            </div>
            <div class="price">
              <span>&yen;199</span>
            </div>
          </li>
          <li>
            <div class="picture">
              <img
                src="https://mall.s.maizuo.com/bcc961c6faea5b9a2467c9d759db3cd6.png?x-oss-process=image/resize,w_248"
                alt
              />
            </div>
            <div class="title">
              <span>红心火龙果</span>
            </div>
            <div class="price">
              <span>&yen;199</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<style lang="less" scoped>
   .foods{
          .m-right-top {
        width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
      display: flex;
      justify-content: center;
      img{
        //   width: 283px;
          height: 100px;
      }
    }
    .m-right-bottom {
      ul {
        padding-top: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-flow: wrap;
        padding-bottom: 50px;
        li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 5px;
          .picture {
            height: 120px;
            width: 110px;
            background: #f9fafe;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
            img {
              height: 100%;
            }
          }
          .title {
            margin-bottom: 8px;
            font-size: 14px;
          }
          .price {
            font-size: 14px;
            color: red;
          }
        }
      }
    }
   }
</style>